﻿@page "/gallery"
@inherits AuthRedirect
@inject NavigationManager NavigationManager
@inject IHttpClientFactory HttpClientFactory
@inject AuthenticationStateService AuthenticationStateService
@inject IJSRuntime JSRuntime
@using System.Text.Json.Serialization;
@using System.Text.Json;
@using System.Text;

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

<div class="gallery-container">
    <!-- 顶部导航栏 -->
    <header class="app-header">
        <div class="logo">
            <img src="/logo.png" alt="Logo" class="logo-image">
        </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="main-content">
        <!-- 返回按钮 -->
        <div class="nav-bar">
            @if (selectedCategory == null && selectedItem == null && selectedFeature == null)
            {
                <div></div>
            }
            else if (selectedCategory != null && selectedItem == null && selectedFeature == null)
            {
                <button @onclick="BackToCategories" class="back-btn">
                    <i class="bi bi-arrow-left"></i>
                    <span>返回分类</span>
                </button>
            }
            else if (selectedItem != null && selectedFeature == null)
            {
                <button @onclick="BackToCategoryDetail" class="back-btn">
                    <i class="bi bi-arrow-left"></i>
                    <span>返回植物列表</span>
                </button>
            }
            else
            {
                <button @onclick="BackToFeatures" class="back-btn">
                    <i class="bi bi-arrow-left"></i>
                    <span>返回生长时期</span>
                </button>
            }
        </div>

        <!-- 主页面内容 -->
        @if (selectedCategory == null && selectedItem == null && selectedFeature == null)
        {
            <!-- 标题和说明 -->
            <div class="header-section">
                <h1 class="title">植物图鉴</h1>
                <p class="description">探索丰富的植物世界，了解各类植物的特征和生长过程</p>
            </div>

            <!-- 分类标题 -->
            <h2 class="category-title">植物分类</h2>

            <!-- 分类按钮网格 -->
            <div class="category-grid">
                @foreach (var (category, index) in categories.Select((c, i) => (c, i)))
                {
                    <div class="category-card @($"category-card-{index % 6}")" @onclick="() => SelectCategory(category)">
                        <div class="category-content">
                            <div class="category-icon">
                                <i class="bi bi-collection"></i>
                            </div>
                            <h3>@category.CategoryName</h3>
                        </div>
                    </div>
                }
            </div>
        }
        else if (selectedCategory != null && selectedItem == null && selectedFeature == null)
        {
            <!-- 分类详情页面 -->
            <div class="category-detail">
                <div class="header-section">
                    <span class="category-tag">@selectedCategory.CategoryName</span>
                    <h1 class="title">植物种类</h1>
                    <p class="description">该分类下的所有植物种类</p>
                </div>

                <!-- 植物种类网格 -->
                <div class="items-grid">
                    @foreach (var (plant, index) in plantTypes.Select((p, i) => (p, i)))
                    {
                        <div class="item-card @($"item-card-{index % 6}")" @onclick="() => SelectItem(plant)">
                            <div class="plant-content">
                                <div class="plant-icon">
                                    <i class="bi bi-apple"></i>
                                </div>
                                <div class="plant-text">
                                    <h3>@GetBracketsContent(plant.ScientificName)</h3>
                                    <p>@plant.TypeName</p>
                                </div>
                            </div>
                        </div>
                    }
                </div>
            </div>
        }
        else if (selectedItem != null && selectedFeature == null)
        {
            <!-- 生长时期页面 -->
            <div class="item-detail">
                <div class="header-section">
                    <span class="plant-tag">@GetBracketsContent(selectedItem.ScientificName)</span>
                    <h1 class="title">生长时期</h1>
                    <p class="description">观察植物在不同生长阶段的变化</p>
                </div>

                <!-- 生长时期按钮 -->
                <div class="growth-stages-grid">
                    @foreach (var (feature, index) in plantFeatures.Select((f, i) => (f, i)))
                    {
                        <div class="stage-card @($"item-card-{index % 6}")" @onclick="() => SelectFeature(feature)">
                            <div class="stage-content">
                                <div class="stage-icon">
                                    <i class="bi bi-calendar"></i>
                                </div>
                                <h3>@feature.FeatureName</h3>
                            </div>
                        </div>
                    }
                </div>
            </div>
        }
        else
        {
            <!-- 样本列表页面 -->
            <div class="sample-detail">
                <div class="header-section">
                    <span class="feature-tag">@selectedFeature.FeatureName</span>
                    <h1 class="title">@GetBracketsContent(selectedItem.ScientificName)</h1>
                    <p class="description">查看该生长阶段下的详细样本</p>
                </div>
                <div class="sample-grid">
                    @foreach (var (sample, index) in samples.Select((s, i) => (s, i)))
                    {
                        <div class="sample-card @($"item-card-{index % 6}")" @onclick="() => ShowSampleDetail(sample)">
                            <div class="sample-content">
                                <div class="sample-icon">
                                    <i class="bi bi-image"></i>
                                </div>
                                <h3>@sample.SampleName</h3>
                            </div>
                        </div>
                    }
                </div>
            </div>
        }

        <!-- 样本详情弹窗 -->
        @if (selectedItem != null && selectedFeature!=null && detail != null)
        {
            <div class="modal-backdrop" @onclick="CloseSampleDetail"></div>
            <div class="sample-dialog">
                <div class="sample-modal-content">
                    <!-- 图片区域 -->
                    <div class="sample-image">
                        <img src="data:image/jpeg;base64,@detail.ExampleImageUrl" alt="@detail.SampleName" class="sample-preview" />
                        <div class="sample-tags">
                            <span class="tag">@selectedFeature.FeatureName</span>
                        </div>
                    </div>

                    <!-- 信息区域 -->
                    <div class="sample-info">
                        <div class="sample-header">
                            <h3 class="sample-name">
                                <i class="bi bi-journal"></i>
                                @detail.SampleName
                            </h3>
                        </div>

                        <hr class="custom-divider" />

                        <div class="sample-description">
                            <h4>
                                <i class="bi bi-file-text"></i>
                                样本描述
                            </h4>
                            <p>@(detail.Description ?? "暂无描述")</p>
                        </div>

                        <hr class="custom-divider" />

                        <div class="sample-details">
                            <h4>
                                <i class="bi bi-graph-up"></i>
                                特征详情
                            </h4>
                            @if (selectedFeature.FeatureId == 1) // 种子质量
                            {
                                <div class="feature-detail">
                                    <div class="detail-item">
                                        <span class="detail-label">种子质量</span>
                                        <span>@(detail.FeatureDetails?.QualityName ?? "未知")</span>
                                    </div>
                                    <div class="detail-item">
                                        <span class="detail-label">详细描述</span>
                                        <span>@(detail.FeatureDetails?.Description ?? "暂无描述")</span>
                                    </div>
                                </div>
                            }
                            else if (selectedFeature.FeatureId == 2) // 生长阶段
                            {
                                <div class="feature-detail">
                                    <div class="detail-item">
                                        <span class="detail-label">生长阶段</span>
                                        <span>@(detail.FeatureDetails?.StageName ?? "未知")</span>
                                    </div>
                                    <div class="detail-item">
                                        <span class="detail-label">详细描述</span>
                                        <span>@(detail.FeatureDetails?.Description ?? "暂无描述")</span>
                                    </div>
                                </div>
                            }
                            else if (selectedFeature.FeatureId == 3) // 叶片疾病
                            {
                                <div class="feature-detail">
                                    <div class="detail-item">
                                        <span class="detail-label">疾病名称</span>
                                        <span>@(detail.FeatureDetails?.DiseaseName ?? "未知")</span>
                                    </div>
                                    <div class="detail-item">
                                        <span class="detail-label">详细描述</span>
                                        <span>@(detail.FeatureDetails?.Description ?? "暂无描述")</span>
                                    </div>
                                </div>
                            }
                            else if (selectedFeature.FeatureId == 4) // 果实成熟度
                            {
                                <div class="feature-detail">
                                    <div class="detail-item">
                                        <span class="detail-label">成熟度</span>
                                        <span>@(detail.FeatureDetails?.LevelName ?? "未知")</span>
                                    </div>
                                    <div class="detail-item">
                                        <span class="detail-label">详细描述</span>
                                        <span>@(detail.FeatureDetails?.Description ?? "暂无描述")</span>
                                    </div>
                                </div>
                            }
                        </div>
                    </div>
                </div>

                <div class="dialog-footer">
                    <button @onclick="CloseSampleDetail" class="btn">
                        <i class="bi bi-x"></i>
                        关闭
                    </button>
                </div>
            </div>
        }
    </main>

    <!-- 底部导航栏 -->
    <footer class="bottom-nav">
        <div class="nav-menu">
            <div class="nav-item @(activeIndex == "/home" ? "active" : "")" @onclick="@(() => HandleMenuSelect("/home"))">
                <i class="bi bi-house-door"></i>
                <span>首页</span>
            </div>
            <div class="nav-item @(activeIndex == "/detection" ? "active" : "")" @onclick="@(() => HandleMenuSelect("/detection"))">
                <i class="bi bi-camera"></i>
                <span>识别</span>
            </div>
            <div class="nav-item @(activeIndex == "/gallery" ? "active" : "")" @onclick="@(() => HandleMenuSelect("/gallery"))">
                <i class="bi bi-journal-bookmark"></i>
                <span>图鉴</span>
            </div>
        </div>
    </footer>
</div>

@code {
    private PlantCategory selectedCategory;
    private PlantType selectedItem;
    private PlantFeature selectedFeature;
    private SampleDetail detail;
    private List<PlantCategory> categories = new();
    private List<PlantType> plantTypes = new();
    private List<PlantFeature> plantFeatures = new();
    private List<FeatureSample> samples = new();
    private bool loading;
    private string error;
    private string activeIndex = "/gallery";

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await FetchCategories();
        }
    }

    private string GetBracketsContent(string text)
    {
        if (string.IsNullOrEmpty(text)) return "";

        var start = text.IndexOf('(');
        var end = text.LastIndexOf(')');

        if (start != -1 && end != -1 && start < end)
        {
            return text.Substring(start + 1, end - start - 1);
        }
        return text;
    }

    private async Task FetchCategories()
    {
        loading = true;
        try
        {
            var httpClient = HttpClientFactory.CreateClient("Api");

            //获取token
            var token = await AuthenticationStateService.GetTokenAsync();
            httpClient.DefaultRequestHeaders.Authorization = new System.Net.Http.Headers.AuthenticationHeaderValue(token);

            var response = await httpClient.GetAsync("api/plants/categories");
            var ResponseContent = await response.Content.ReadAsStringAsync();
            Console.WriteLine($"categories API 返回: {ResponseContent}");

            if (response.IsSuccessStatusCode)
            {
                var apiResponse = await response.Content.ReadFromJsonAsync<PlantCategoriesResponse>();

                if (apiResponse?.Success == true)
                {
                    categories = apiResponse.Data;
                    StateHasChanged();
                }
                else
                {
                    error = apiResponse?.Error ?? "获取数据失败";
                    await JSRuntime.InvokeVoidAsync("alert", "获取数据失败");
                }
            }
            else
            {
                if (response.StatusCode == System.Net.HttpStatusCode.Unauthorized)
                {
                    error = "登录已过期，请重新登录";
                    await JSRuntime.InvokeVoidAsync("alert", "登录已过期，请重新登录");
                    NavigationManager.NavigateTo("/login");
                }
                else
                {
                    var errorResponse = await response.Content.ReadFromJsonAsync<ErrorResponse>();
                    error = errorResponse?.Error ?? $"获取数据失败 (HTTP {response.StatusCode})";
                    await JSRuntime.InvokeVoidAsync("alert", "获取数据失败");
                }
            }
        }
        catch (HttpRequestException ex)
        {
            error = "网络连接失败，请检查网络";
            Console.WriteLine($"HTTP请求异常: {ex.Message}");
            await JSRuntime.InvokeVoidAsync("alert", "网络连接失败，请检查网络");
        }
        catch (Exception ex)
        {
            error = "获取植物分类失败";
            Console.WriteLine($"异常: {ex.Message}");
            await JSRuntime.InvokeVoidAsync("alert", "获取植物分类失败");
        }
        finally
        {
            loading = false;
        }
    }

    private async Task FetchPlantTypes(int categoryId)
    {
        loading = true;
        try
        {
            var httpClient = HttpClientFactory.CreateClient("Api");

            // 获取 token 并设置请求头
            var token = await AuthenticationStateService.GetTokenAsync();
            httpClient.DefaultRequestHeaders.Authorization = new System.Net.Http.Headers.AuthenticationHeaderValue(token);

            // 构造请求体（对应后端 POST 请求）
            var requestBody = new { category_id = categoryId };
            var jsonContent = JsonSerializer.Serialize(requestBody);
            var httpContent = new StringContent(jsonContent, Encoding.UTF8, "application/json");

            // 调用 API
            var response = await httpClient.PostAsync("api/plants/plantTypes", httpContent);

            var ResponseContent = await response.Content.ReadAsStringAsync();
            Console.WriteLine($"plantTypes API 返回: {ResponseContent}");
            if (response.IsSuccessStatusCode)
            {
                var apiResponse = await response.Content.ReadFromJsonAsync<PlantTypesResponse>();
                if (apiResponse?.Success == true)
                {
                    plantTypes = apiResponse.Data;
                    StateHasChanged();
                }
                else
                {
                    error = apiResponse?.Error ?? "获取植物种类数据失败";
                    await JSRuntime.InvokeVoidAsync("alert", error);
                }
            }
            else
            {
                if (response.StatusCode == System.Net.HttpStatusCode.Unauthorized)
                {
                    error = "登录已过期，请重新登录";
                    await JSRuntime.InvokeVoidAsync("alert", error);
                    NavigationManager.NavigateTo("/login");
                }
                else
                {
                    var errorResponse = await response.Content.ReadFromJsonAsync<ErrorResponse>();
                    error = errorResponse?.Error ?? $"HTTP 错误: {response.StatusCode}";
                    await JSRuntime.InvokeVoidAsync("alert", error);
                }
            }
        }
        catch (HttpRequestException ex)
        {
            error = $"网络请求失败: {ex.Message}";
            await JSRuntime.InvokeVoidAsync("alert", error);
        }
        catch (Exception ex)
        {
            error = $"未知错误: {ex.Message}";
            await JSRuntime.InvokeVoidAsync("alert", error);
        }
        finally
        {
            loading = false;
        }
    }

    private async Task FetchPlantFeatures()
    {
        loading = true;
        try
        {
            var httpClient = HttpClientFactory.CreateClient("Api");

            // 获取 token 并设置请求头
            var token = await AuthenticationStateService.GetTokenAsync();
            httpClient.DefaultRequestHeaders.Authorization =
                new System.Net.Http.Headers.AuthenticationHeaderValue(token);

            // 调用 API（GET 请求）
            var response = await httpClient.GetAsync("api/plants/plantFeatures");

            var ResponseContent = await response.Content.ReadAsStringAsync();
            Console.WriteLine($"plantFeatures API 返回: {ResponseContent}");

            if (response.IsSuccessStatusCode)
            {
                var apiResponse = await response.Content.ReadFromJsonAsync<PlantFeaturesResponse>();
                if (apiResponse?.Success == true)
                {
                    plantFeatures = apiResponse.Data;
                    StateHasChanged();
                }
                else
                {
                    error = apiResponse?.Error ?? "获取植物特征数据失败";
                    await JSRuntime.InvokeVoidAsync("alert", error);
                }
            }
            else
            {
                if (response.StatusCode == System.Net.HttpStatusCode.Unauthorized)
                {
                    error = "登录已过期，请重新登录";
                    await JSRuntime.InvokeVoidAsync("alert", error);
                    NavigationManager.NavigateTo("/login");
                }
                else
                {
                    var errorResponse = await response.Content.ReadFromJsonAsync<ErrorResponse>();
                    error = errorResponse?.Error ?? $"HTTP 错误: {response.StatusCode}";
                    await JSRuntime.InvokeVoidAsync("alert", error);
                }
            }
        }
        catch (HttpRequestException ex)
        {
            error = $"网络请求失败: {ex.Message}";
            await JSRuntime.InvokeVoidAsync("alert", error);
        }
        catch (Exception ex)
        {
            error = $"未知错误: {ex.Message}";
            await JSRuntime.InvokeVoidAsync("alert", error);
        }
        finally
        {
            loading = false;
        }
    }

    private void BackToCategories()
    {
        selectedCategory = null;
        selectedItem = null;
        selectedFeature = null;
        plantTypes.Clear();
    }

    private void BackToCategoryDetail()
    {
        selectedItem = null;
        selectedFeature = null;
    }

    private void BackToFeatures()
    {
        selectedFeature = null;
    }

    private async Task SelectCategory(PlantCategory category)
    {
        selectedCategory = category;
        selectedItem = null;
        selectedFeature = null;
        await FetchPlantTypes(category.CategoryId);
    }

    private async Task SelectItem(PlantType item)
    {
        selectedItem = item;
        selectedFeature = null;
        await FetchPlantFeatures();
    }

    private async Task SelectFeature(PlantFeature feature)
    {
        selectedFeature = feature;
        await FetchFeatureSamples(selectedItem.PlantTypeId,selectedFeature.FeatureId);
    }

    private async Task FetchFeatureSamples(int plantTypeId, int featureId)
    {
        loading = true;
        try
        {
            var httpClient = HttpClientFactory.CreateClient("Api");

            // 获取 token 并设置请求头
            var token = await AuthenticationStateService.GetTokenAsync();
            httpClient.DefaultRequestHeaders.Authorization =
                new System.Net.Http.Headers.AuthenticationHeaderValue(token);

            // 构造请求体
            var requestBody = new
            {
                plant_type_id = plantTypeId,
                feature_id = featureId
            };

            // 调用 API（POST 请求）
            var response = await httpClient.PostAsJsonAsync("api/plants/featureSamples", requestBody);

            var ResponseContent = await response.Content.ReadAsStringAsync();
            Console.WriteLine($"featureSamples API 返回: {ResponseContent}");

            if (response.IsSuccessStatusCode)
            {
                var apiResponse = await response.Content.ReadFromJsonAsync<FeatureSamplesResponse>();
                if (apiResponse?.Success == true)
                {
                    samples = apiResponse.Data;
                    StateHasChanged();
                }
                else
                {
                    error = apiResponse?.Error ?? "获取特征样本数据失败";
                    await JSRuntime.InvokeVoidAsync("alert", error);
                }
            }
            else
            {
                if (response.StatusCode == System.Net.HttpStatusCode.Unauthorized)
                {
                    error = "登录已过期，请重新登录";
                    await JSRuntime.InvokeVoidAsync("alert", error);
                    NavigationManager.NavigateTo("/login");
                }
                else
                {
                    var errorResponse = await response.Content.ReadFromJsonAsync<ErrorResponse>();
                    error = errorResponse?.Error ?? $"HTTP 错误: {response.StatusCode}";
                    await JSRuntime.InvokeVoidAsync("alert", error);
                }
            }
        }
        catch (HttpRequestException ex)
        {
            error = $"网络请求失败: {ex.Message}";
            await JSRuntime.InvokeVoidAsync("alert", error);
        }
        catch (Exception ex)
        {
            error = $"未知错误: {ex.Message}";
            await JSRuntime.InvokeVoidAsync("alert", error);
        }
        finally
        {
            loading = false;
        }
    }

    private async Task FetchSampleDetails(int sampleId)
    {
        loading = true;
        try
        {
            var httpClient = HttpClientFactory.CreateClient("Api");

            // 获取 token 并设置请求头
            var token = await AuthenticationStateService.GetTokenAsync();
            httpClient.DefaultRequestHeaders.Authorization =
                new System.Net.Http.Headers.AuthenticationHeaderValue(token);

            // 构造请求体
            var requestBody = new { sample_id = sampleId };

            // 调用 API（POST 请求）
            var response = await httpClient.PostAsJsonAsync("api/plants/sampleDetails", requestBody);

            var ResponseContent = await response.Content.ReadAsStringAsync();
            Console.WriteLine($"sampleDetails API 返回: {ResponseContent}");

            if (response.IsSuccessStatusCode)
            {
                var apiResponse = await response.Content.ReadFromJsonAsync<SampleDetailsResponse>();
                if (apiResponse?.Success == true)
                {
                    detail = apiResponse.Data;
                    StateHasChanged();
                }
                else
                {
                    error = apiResponse?.Error ?? "获取样本详细信息失败";
                    await JSRuntime.InvokeVoidAsync("alert", error);
                }
            }
            else
            {
                if (response.StatusCode == System.Net.HttpStatusCode.Unauthorized)
                {
                    error = "登录已过期，请重新登录";
                    await JSRuntime.InvokeVoidAsync("alert", error);
                    NavigationManager.NavigateTo("/login");
                }
                else
                {
                    var errorResponse = await response.Content.ReadFromJsonAsync<ErrorResponse>();
                    error = errorResponse?.Error ?? $"HTTP 错误: {response.StatusCode}";
                    await JSRuntime.InvokeVoidAsync("alert", error);
                }
            }
        }
        catch (HttpRequestException ex)
        {
            error = $"网络请求失败: {ex.Message}";
            await JSRuntime.InvokeVoidAsync("alert", error);
        }
        catch (Exception ex)
        {
            error = $"未知错误: {ex.Message}";
            await JSRuntime.InvokeVoidAsync("alert", error);
        }
        finally
        {
            loading = false;
        }
    }

    private void CloseSampleDetail()
    {
        detail = null;
    }

    private async Task ShowSampleDetail(FeatureSample sample)
    {
        await FetchSampleDetails(sample.SampleId);

        detail = new SampleDetail
            {
                SampleId = detail.SampleId,
                SampleName = detail.SampleName,
                Description = detail.Description,
                ExampleImageUrl = detail.ExampleImageUrl,
                FeatureDetails = detail.FeatureDetails
            };
    }

    private void HandleMenuSelect(string index)
    {
        activeIndex = index;
        NavigationManager.NavigateTo(index);
    }

    // 数据模型类
    public class PlantCategoriesResponse
    {
        public bool Success { get; set; }
        public List<PlantCategory>? Data { get; set; }
        public string? Error { get; set; }
    }

    public class PlantCategory
    {
        public int CategoryId { get; set; }

        public string? CategoryName { get; set; }

        public string? Description { get; set; }
    }

    public class ErrorResponse
    {
        public string? Error { get; set; }
    }

    public class PlantTypesResponse
    {
        public bool Success { get; set; }
        public List<PlantType> Data { get; set; }
        public string Error { get; set; }
    }

    public class PlantType
    {

        public int PlantTypeId { get; set; }

        public int CategoryId { get; set; }

        public string TypeName { get; set; }

        public string ScientificName { get; set; }

        public string Description { get; set; }
    }

    public class PlantFeaturesResponse
    {
        public bool Success { get; set; }
        public List<PlantFeature> Data { get; set; }
        public string Error { get; set; }
    }

    public class PlantFeature
    {

        public int FeatureId { get; set; }


        public string FeatureName { get; set; }

        public string Description { get; set; }
    }

    public class FeatureSamplesResponse
    {
        public bool Success { get; set; }

        public List<FeatureSample> Data { get; set; }

        public string Error { get; set; }
    }

    public class FeatureSample
    {
        [JsonPropertyName("sample_id")]
        public int SampleId { get; set; }
        [JsonPropertyName("sample_name")]
        public string SampleName { get; set; }
    }

    public class SampleDetailsResponse
    {
        public bool Success { get; set; }

        public SampleDetail Data { get; set; }

        public string Error { get; set; }
    }

    public class SampleDetail
    {
        [JsonPropertyName("sample_id")]
        public int SampleId { get; set; }

        [JsonPropertyName("sample_name")]
        public string SampleName { get; set; }

        [JsonPropertyName("description")]
        public string Description { get; set; }

        [JsonPropertyName("plant_type")]
        public PlantTypeDetail PlantType { get; set; }

        [JsonPropertyName("feature")]
        public FeatureDetail Feature { get; set; }

        [JsonPropertyName("example_image_url")]
        public string ExampleImageUrl { get; set; }

        [JsonPropertyName("created_at")]
        public DateTime? CreatedAt { get; set; }

        [JsonPropertyName("feature_details")]
        public FeatureDetailData FeatureDetails { get; set; }
    }

    public class PlantTypeDetail
    {
        [JsonPropertyName("plant_type_id")]
        public int PlantTypeId { get; set; }

        [JsonPropertyName("plant_type_name")]
        public string PlantTypeName { get; set; }
    }

    public class FeatureDetail
    {
        [JsonPropertyName("feature_id")]
        public int FeatureId { get; set; }

        [JsonPropertyName("feature_name")]
        public string FeatureName { get; set; }
    }

    public class FeatureDetailData
    {
        // 通用字段（根据feature_id动态匹配）
        [JsonPropertyName("quality_name")]
        public string QualityName { get; set; }

        [JsonPropertyName("stage_name")]
        public string StageName { get; set; }

        [JsonPropertyName("disease_name")]
        public string DiseaseName { get; set; }

        [JsonPropertyName("maturity_level")]
        public string LevelName { get; set; }

        [JsonPropertyName("description")]
        public string Description { get; set; }
    }
}

<style>
    *:focus {
        outline: none !important;
        box-shadow: none !important;
    }
    /* 整体布局 */
    .gallery-container {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        background-color: #f8faf8;
        font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        position: relative;
        overflow: hidden;
    }

    /* 顶部导航栏 */
    .app-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 15px;
        height: 60px;
        background-color: white;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    .logo-image {
        height: 40px;
        border-radius: 40px;
    }

    /* 主要内容区域 */
    .main-content {
        flex: 1;
        padding: 50px 20px 50px;
        padding-bottom: 80px;
        max-width: 1200px;
        margin: 0 auto;
        width: 100%;
    }

    /* 返回按钮 */
    .nav-bar {
        margin-bottom: 24px;
    }

    .back-btn {
        padding: 8px 16px;
        border-radius: 20px;
        background-color: #f5f7fa;
        color: #4caf50;
        border: 1px solid #e0e0e0;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        transition: all 0.3s;
        cursor: pointer;
    }

    .back-btn:hover {
        background-color: #e8f5e9;
        color: #2e7d32;
        border-color: #c8e6c9;
        box-shadow: 0 2px 8px rgba(76, 175, 80, 0.2);
    }

    /* 标题区域 */
    .header-section {
        text-align: center;
        margin-bottom: 32px;
    }

    .title {
        font-size: 28px;
        color: #2e7d32;
        margin-bottom: 12px;
        font-weight: 600;
        letter-spacing: 1px;
    }

    .description {
        font-size: 15px;
        color: #757575;
        margin-bottom: 24px;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.6;
    }

    .category-title {
        text-align: center;
        font-size: 22px;
        color: #2e7d32;
        margin-bottom: 24px;
        font-weight: 500;
        position: relative;
        padding-bottom: 12px;
    }

    .category-title::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 3px;
        background: linear-gradient(90deg, rgba(76, 175, 80, 0.2), #4caf50, rgba(76, 175, 80, 0.2));
        border-radius: 3px;
    }

    /* 标签样式 */
    .category-tag,
    .plant-tag,
    .feature-tag {
        font-size: 16px;
        padding: 6px 16px;
        margin-bottom: 12px;
        border-radius: 16px;
        font-weight: 500;
        background-color: #e8f5e9;
        color: #2e7d32;
        display: inline-block;
    }

    /* 网格布局 */
    .category-grid,
    .items-grid,
    .growth-stages-grid,
    .sample-grid {
        display: grid;
        gap: 20px;
        margin-top: 20px;
    }

    .category-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .items-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    .growth-stages-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .sample-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }

    /* 卡片通用样式 */
    .category-card,
    .item-card,
    .stage-card,
    .sample-card {
        margin: 10px;
        cursor: pointer;
        transition: all 0.3s;
        border-radius: 12px;
        overflow: hidden;
        height: calc(100% - 20px);
        border: none;
        background-color: white;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    .category-card:hover,
    .item-card:hover,
    .stage-card:hover,
    .sample-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 16px rgba(76, 175, 80, 0.2);
    }

    /* 卡片内容样式 */
    .category-content,
    .plant-content,
    .stage-content,
    .sample-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 24px 16px;
        text-align: center;
        height: 100%;
    }

    /* 分类卡片图标 - 使用不同颜色 */
    .category-icon {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;
        color: white;
    }

    .category-card-0 .category-icon {
        background-color: #bbdefb;
    }

    .category-card-1 .category-icon {
        background-color: #c8e6c9;
    }

    .category-card-2 .category-icon {
        background-color: #f8bbd0;
    }

    .category-card-3 .category-icon {
        background-color: #ffecb3;
    }

    .category-card-4 .category-icon {
        background-color: #e1bee7;
    }

    .category-card-5 .category-icon {
        background-color: #b2ebf2;
    }

    /* 植物卡片图标背景颜色 */
    .item-card-0 .plant-icon {
        background-color: #64b5f6;
    }

    .item-card-1 .plant-icon {
        background-color: #81c784;
    }

    .item-card-2 .plant-icon {
        background-color: #f06292;
    }

    .item-card-3 .plant-icon {
        background-color: #ffb74d;
    }

    .item-card-4 .plant-icon {
        background-color: #ba68c8;
    }

    .item-card-5 .plant-icon {
        background-color: #4dd0e1;
    }

    /* 生长阶段卡片图标背景颜色 */
    .item-card-0 .stage-icon {
        background-color: #5c6bc0;
    }

    .item-card-1 .stage-icon {
        background-color: #66bb6a;
    }

    .item-card-2 .stage-icon {
        background-color: #ec407a;
    }

    .item-card-3 .stage-icon {
        background-color: #ffa726;
    }

    .item-card-4 .stage-icon {
        background-color: #ab47bc;
    }

    .item-card-5 .stage-icon {
        background-color: #26c6da;
    }

    /* 样本卡片图标背景颜色 */
    .item-card-0 .sample-icon {
        background-color: #42a5f5;
    }

    .item-card-1 .sample-icon {
        background-color: #4caf50;
    }

    .item-card-2 .sample-icon {
        background-color: #e91e63;
    }

    .item-card-3 .sample-icon {
        background-color: #ff9800;
    }

    .item-card-4 .sample-icon {
        background-color: #9c27b0;
    }

    .item-card-5 .sample-icon {
        background-color: #00bcd4;
    }

    /* 图标通用样式 */
    .category-icon i,
    .plant-icon i,
    .stage-icon i,
    .sample-icon i {
        font-size: 28px;
    }

    .plant-icon,
    .stage-icon,
    .sample-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;
        color: white;
    }

    /* 植物文本内容 */
    .plant-text {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

        .plant-text h3 {
            font-size: 16px;
            color: #333;
            margin-bottom: 4px;
        }

        .plant-text p {
            font-size: 14px;
            color: #757575;
        }

    /* 样本详情弹窗 */
    .modal-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1000;
    }

    .sample-dialog {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        max-width: 800px;
        background-color: white;
        border-radius: 12px;
        z-index: 1001;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        overflow: hidden;
    }

    .sample-modal-content {
        display: flex;
        flex-direction: column;
        max-height: 80vh;
        overflow-y: auto;
    }

    .sample-image {
        position: relative;
        width: 100%;
        height: 300px;
        overflow: hidden;
    }

    .sample-preview {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .sample-tags {
        position: absolute;
        top: 20px;
        right: 20px;
    }

    .tag {
        padding: 6px 12px;
        background-color: rgba(76, 175, 80, 0.9);
        color: white;
        border-radius: 16px;
        font-size: 14px;
        font-weight: 500;
    }

    .sample-info {
        padding: 24px;
    }

    .sample-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
    }

    .sample-name {
        font-size: 22px;
        color: #2e7d32;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .rating {
        background-color: #e8f5e9;
        color: #2e7d32;
        padding: 6px 12px;
        border-radius: 16px;
        font-weight: 500;
    }

    .custom-divider {
        border: none;
        height: 1px;
        background-color: #e0e0e0;
        margin: 16px 0;
    }

    .sample-description h4,
    .sample-details h4 {
        font-size: 18px;
        color: #2e7d32;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .sample-description p {
        color: #616161;
        line-height: 1.6;
    }

    .feature-detail {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 16px;
    }

    .detail-item {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .detail-label {
        font-weight: 500;
        color: #757575;
    }

    .dialog-footer {
        padding: 16px;
        display: flex;
        justify-content: flex-end;
        border-top: 1px solid #e0e0e0;
    }

    .btn {
        padding: 8px 20px;
        border-radius: 20px;
        background-color: #4caf50;
        color: white;
        border: none;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
        transition: all 0.3s;
    }

        .btn:hover {
            background-color: #388e3c;
            box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
        }

    .sample-preview {
        max-width: 100%;
        max-height: 300px;
        object-fit: contain;
    }

    /* 底部导航栏 */
    .bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60px;
        background-color: white;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
        z-index: 100;
    }

    .nav-menu {
        display: flex;
        height: 100%;
    }

    .nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #757575;
        cursor: pointer;
        transition: all 0.3s;
    }

        .nav-item i {
            font-size: 22px;
            margin-bottom: 4px;
        }

        .nav-item span {
            font-size: 12px;
        }

        .nav-item.active {
            color: #4caf50;
        }

        .nav-item:hover {
            color: #2e7d32;
        }
</style>